<script lang="ts" setup>
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {ref} from "vue";
import {UserHomeMenuType} from "@/enum/userHomeMenuType";
import {getFansListApi, getFollowListApi} from "@/api/user";
import type {FollowPreItem} from "@/types/user";
import {useUserStore} from "@/stores/user";

interface options {
  type: UserHomeMenuType
  userId: number
}

onPullDownRefresh(() => {
  uni.stopPullDownRefresh()
})
const {safeAreaInsets} = uni.getSystemInfoSync()
const title = ref('')
const userId = ref()
const type = ref<0 | 1>(0)
onReachBottom(async () => {
  // 加载更多
  page.value++
  if (isNoMore) {
    return uni.showToast({
      title: '没有更多了',
      duration: 1500,
      icon: 'none'
    })
  }
  if (type.value === UserHomeMenuType.FOLLOW) {
    await getFollowList(userId.value)
  } else if (type.value === UserHomeMenuType.FANS) {
    await getFansList(userId.value)
  }

})
onLoad((option) => {
  userId.value = option?.userId
  type.value = Number(option?.type) as 0 | 1
  if (!userId.value) {
    return
  }
  switch (Number(option?.type)) {
    case UserHomeMenuType.FANS:
      title.value = '粉丝列表'
      getFansList(userId.value)
      break;
    case UserHomeMenuType.FOLLOW:
      getFollowList(userId.value)
      title.value = '关注列表'
      break;
    default:
      title.value = '好友列表'
  }
})

const page = ref(1)
const pageSize = ref(10)
const followList = ref<FollowPreItem[]>()
const isNoMore = ref(false)
const loadDelay = ref(false)
const loading = ref(false)
const isEmpty = ref(false)
/**
 * 获取关注列表
 */
const getFollowList = async (userId: number) => {
  if (loadDelay.value) {
    return
  }
  loadDelay.value = true
  loading.value = true
  const res = await getFollowListApi(page.value, pageSize.value, userId, type.value)
  loadDelay.value = false
  loading.value = false
  followList.value = followList.value
      ? [...followList.value, ...res.data.data]
      : res.data.data
  isEmpty.value = followList.value?.length === 0
  if (page.value * pageSize.value >= res.data.total) {
    isNoMore.value = true
  }
}
/**
 * 获取粉丝列表
 */
const getFansList = async (userId: number) => {
  if (loadDelay.value) {
    return
  }
  loadDelay.value = true
  loading.value = true
  const res = await getFansListApi(page.value, pageSize.value, userId, type.value)
  loadDelay.value = false
  loading.value = false
  followList.value = followList.value
      ? [...followList.value, ...res.data.data]
      : res.data.data
  isEmpty.value = followList.value?.length === 0
  if (page.value * pageSize.value >= res.data.total) {
    isNoMore.value = true
  }
}

const userStore = useUserStore()
const goUserHomepage = (userId: number) => {
  let type = 1
  if (userId === userStore.userInfoData?.userID) {
    type = 0
  }
  uni.navigateTo({url: '/subPkg/userHomepage/userHomepage?type=' + type + '&userId=' + userId})
}
</script>
<template>
  <view :scroll-y="true" style="background: #fff">
    <view style="position: fixed;top: 0;left: 0;background-color: #fff;z-index: 100;width: 100%">
      <aw-nav-second :title="title"></aw-nav-second>
    </view>
    <view :style="{ paddingTop: safeAreaInsets?.top+50+ 'px'}" class="list-content">
      <view class="bg-white" style="width: 100%;min-height: 100px">
        <view v-for="(item,index) in followList" :key="item.userId" class="msg-list-item"
              @click="goUserHomepage(item.userId)">
          <view class="msg-common msg-avatar">
            <uv-avatar :src="item.avatar" mode="aspectFill" size="50"></uv-avatar>
          </view>
          <view class="msg-common msg-content ">
            <view class="msg-content-item text-black text-df">{{ item.name }}</view>
            <view class="msg-content-text text-gray text-sm">
              {{ item.intro.length > 20 ? item.intro.substring(0, 19) + '...' : item.intro }}
            </view>
          </view>
          <view class="msg-common padding-right-lg" style="border-bottom: #e6e6e6 1px solid;">
            <view class="cu-btn radius bg-gradual-awGreen">主页</view>
          </view>
        </view>
        <view v-show="loading" style="width: 100%;height: 80px;padding-top: 50px">
          <aw-loader></aw-loader>
        </view>
      </view>
      <view v-show="isNoMore" class="flex justify-center padding-lg text-gray" style="width: 100%">没有更多了哟~</view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.list-content {
  background: #FFFFFF;
  /* #ifndef H5 */
  height: calc(100vh - var(--window-top) - var(--window-bottom));
  /* #endif */
}

.msg-list {
  margin-top: 20rpx;
  background-color: #fff;
  width: 100%;

  &-item {
    width: 100%;
    height: 160rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10rpx;

    .msg-common {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .msg-avatar {
      flex: 2;
    }


    .msg-content {
      flex: 6;
      border-bottom: #e6e6e6 1px solid;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
    }
  }
}
</style>
